<template lang="html">
<section class='swiper' :class="cname">
  <swiper :options='options' :not-next-tick="options.notNextTick">
    <swiper-slide v-for='item in items' :key='item.href'>
      <router-link :to="{ name: item.href}">
        <img :src='item.src'>
      </router-link>
    </swiper-slide>

    <div class="swiper-pagination" v-if="options.pagination"  slot="pagination"/>

  </swiper>
</section>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components:{
    swiper,
    swiperSlide
  },
  props:{
    cname:{
      type:String,
      default:''
    },
    items:{
      type:Array,
      default(){
        return []
      }
    },
    options:{
      type:Object,
      default(){
        return {
          autoplay:true,
          loop:true,
          pagination:{
            el:'.swiper-pagination'
          },
          notNextTick:false
        }
      }
    }
  },
  data(){
    return {

    }
  }
}
</script>

<style lang="scss">
@import '~swiper/dist/css/swiper.css';

</style>
